<template>
  <el-dialog
    class="public-dialog"
    :title="`供应商报关货值系数配置`"
    width="960"
    :modelValue="modelValue"
    @close="handleClose"
    draggable
    align-center
  >
    <div>
      <div class="mb-[8px] mt-[4px]">
        <el-button type="primary" @click="handleAdd(null)">添加</el-button>
      </div>
      <div>
        <vxe-grid ref="tableRef" v-bind="tableOptions">
          <template #operation="{ row }">
            <el-button link type="primary" @click="handleAdd(row)"
              >编辑</el-button
            >
            <el-button link type="danger" @click="handleDelete(row.id)"
              >删除</el-button
            >
            <el-button link type="primary" @click="handleLog(row)"
              >日志</el-button
            >
          </template>
        </vxe-grid>
      </div>
    </div>
    <template #footer>
      <div class="dialog-button">
        <el-button :disabled="loading" @click="handleClose(false)">
          {{ disabled ? "关闭" : "取消" }}
        </el-button>
      </div>
    </template>
    <Add
      v-model="addVisible"
      :id="addId"
      :options="options"
      @close="addId = ''"
      @refresh="handleRefresh"
    />
    <Log
      dialog
      v-model="logVisible"
      :autoLoad="false"
      tag="out.supplier-declare-ratio"
      :business_id="logId"
      @close="logId = ''"
    />
  </el-dialog>
</template>
<script setup lang="jsx">
import { ElMessage } from "element-plus";
import Add from "../detailsAdd/index";
import Log from "@/components/Log/index.vue";
import { getSupplierDeclare, deleteSupplierDeclare } from "../../api.js";
const props = defineProps({
  modelValue: { type: Boolean, default: false },
  disabled: { type: Boolean, default: true },
  options: { type: Object, default: () => {} },
});
const { options } = toRefs(props);
const { proxy } = getCurrentInstance();
const tableRef = ref();
const addVisible = ref(false);
const addId = ref("");
const handleAdd = (val) => {
  addVisible.value = true;
  if (!val) return;
  addId.value = val.id;
};
const emit = defineEmits(["update:modelValue", "refresh", "close"]);
const loading = ref(false);
const tableOptions = reactive({
  pagerConfig: { pageSize: 20 },
  round: true,
  height: "640",
  autoHidden: true,
  columnConfig: {
    resizable: true,
  },
  columns: [
    { fixed: "left", width: 50, type: "checkbox" },
    {
      title: "供应商",
      minWidth: 250,
      field: "supplier_name",
    },
    {
      title: "公司主体",
      width: 200,
      field: "out_declare_company_name",
    },
    {
      title: "指定系数",
      width: 100,
      field: "sp_ratio",
    },
    { title: "人员信息", width: 160, field: "create_user" },
    { title: "时间信息", width: 160, field: "create_time" },
    {
      title: "操作",
      fixed: "right",
      width: 150,
      slots: { default: "operation" },
    },
  ],
  // data: [],
  proxyConfig: {
    autoLoad: true, // 是否自动加载查询数据
    props: {
      result: "data",
      total: "total",
    },
    ajax: {
      query: ({ page }) => {
        return handleReq(page);
      },
    },
  },
});
const handleReq = async (page) => {
  try {
    const res = await getSupplierDeclare({
      ...page,
    });
    const { total } = res;
    const data = res?.data || {};
    return { data, total };
  } catch (e) {
    console.error(e);
  }
};

const handleDelete = (id) => {
  proxy?.confirm({
    title: "提示",
    content: (
      <p>
        确认删除选中的
        <span class="text-[#3366F1] px-[4px]">{1}</span>
        条数据？
      </p>
    ),
    beforeClose: async (action, instance, done) => {
      if (action === "confirm") {
        try {
          instance.confirmButtonLoading = true;
          instance.confirmButtonText = "处理中..";
          await deleteSupplierDeclare({ id });
          ElMessage.success("操作成功");
        } catch (e) {
          console.error(e);
        } finally {
          instance.confirmButtonLoading = false;
          done();
          handleRefresh();
        }
      } else {
        done();
      }
    },
  });
};
const handleRefresh = () => {
  nextTick(() => {
    tableRef.value.commitProxy("reload");
  });
};

const logVisible = ref(false);
const logId = ref("");
const handleLog = (item) => {
  logId.value = item.id;
  logVisible.value = true;
};
const handleClose = async (refresh) => {
  emit("update:modelValue", false);
  emit("close");
  if (refresh) emit("refresh");
};
defineExpose({ handleRefresh });
</script>
